<template>
  <div class="ueditor" style="height: 100% !important">
    <vue-ueditor-wrap
      ref="editorHandler"
      @ready="ready"
      v-model="editorContent"
      :config="config"
      @beforeInit="addCustomButtom"
    ></vue-ueditor-wrap>
    <a-modal
      :visible="dialogVisible"
      width="60vw"
      height="60vh"
      style="min-height: 40vh"
      title="图片上传"
      @cancel="dialogVisible = false"
      :maskClosable="false"
      :key="dialogVisible"
    >
      <div class="image-upload-panel" style="display: flex; justify-content: start; align-items: center">
        <div class="image-item" v-for="(item, index) in imageList" :key="index">
          <img style="margin-right: 10px; margin-top: 5px" width="100px" :src="item.url" />
          <a-icon type="close" class="image-del" @click="delImage(index)" />
        </div>
        <ht-upload
          ref="fileUpload"
          class="upload-demo"
          dbKey="Trd"
          busField="ueditorBusField"
          :busKey="getRandomStr(10)"
          busType="ueditorBusType"
          ftpKey="ftp"
          :showFileList="false"
          style="height: 119px"
          :on-success="afterUpload"
        >
          <img src="~@assets/uploadImage.png" />
          <!-- <a-button type="primary" style="width: 80px; margin-right: 15px">上传</a-button> -->
        </ht-upload>
      </div>
      <span slot="footer" class="dialog-footer">
        <Button
          @click="
            () => {
              this.dialogVisible = false
            }
          "
          >取 消</Button
        >
        <Button type="primary" @click="insertImage">确 定</Button>
      </span>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import '@/utils/upload.install.js'
import '@/config/hteupload.install.js'
import { postAction, getAction } from '@/api/manage'
import VueUeditorWrap from 'vue-ueditor-wrap'
import { ACCESS_TOKEN } from '@/store/mutation-types'
export default {
  name: 'Ueditor',
  components: { VueUeditorWrap },
  props: {
    content: {
      type: String,
      default: '',
    },
    height: {
      type: String,
      default: '100%',
    },
    width: {
      type: String,
      default: '100%',
    },
    autoHeight: {
      type: Boolean,
      default: false,
    },
    autoFloat: {
      type: Boolean,
      default: false,
    },
    autoSave: {
      type: Boolean,
      default: false,
    },
    homeUrl: {
      type: String,
      default: '/Ueditor/',
    },
    serverUrl: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      imageList: [],
      dialogVisible: false,
      editorHandler: null,
      editorContent: this.content,
      config: {
        // 如果需要上传功能,找后端小伙伴要服务器接口地址
        // serverUrl: this.$config.baseUrl + 'ueditor/ueditorConfig',
        // serverUrl: 'http://localhost:9080/ueditor/ueditorConfig',
        serverUrl: this.serverUrl,
        // 你的UEditor资源存放的路径,相对于打包后的index.html
        UEDITOR_HOME_URL: '/hte-vue/Ueditor/',
        // 编辑器不自动被内容撑高
        autoHeightEnabled: this.autoHeight,
        // 工具栏是否可以浮动
        autoFloatEnabled: this.autoFloat,
        // 初始容器高度
        initialFrameHeight: this.height,
        // 初始容器宽度
        initialFrameWidth: this.width,
        // 关闭自动保存
        enableAutoSave: this.autoSave,
        toolbars: [
          [
            'anchor', //锚点
            'undo', //撤销
            'redo', //重做
            'bold', //加粗
            'indent', //首行缩进
            'snapscreen', //截图
            'italic', //斜体
            'underline', //下划线
            'strikethrough', //删除线
            'subscript', //下标
            'fontborder', //字符边框
            'superscript', //上标
            'formatmatch', //格式刷
            'source', //源代码
            'blockquote', //引用
            'pasteplain', //纯文本粘贴模式
            'selectall', //全选
            'print', //打印
            'preview', //预览
            'horizontal', //分隔线
            'removeformat', //清除格式
            'time', //时间
            'date', //日期
            'unlink', //取消链接
            'insertrow', //前插入行
            'insertcol', //前插入列
            'mergeright', //右合并单元格
            'mergedown', //下合并单元格
            'deleterow', //删除行
            'deletecol', //删除列
            'splittorows', //拆分成行
            'splittocols', //拆分成列
            'splittocells', //完全拆分单元格
            'deletecaption', //删除表格标题
            'inserttitle', //插入标题
            'mergecells', //合并多个单元格
            'deletetable', //删除表格
            'cleardoc', //清空文档
            'insertparagraphbeforetable', //"表格前插入行"
            'insertcode', //代码语言
            'fontfamily', //字体
            'fontsize', //字号
            'paragraph', //段落格式
            // 'simpleupload', //单图上传
            // 'insertimage', //多图上传
            'edittable', //表格属性
            'edittd', //单元格属性
            'link', //超链接
            'emotion', //表情
            'spechars', //特殊字符
            'searchreplace', //查询替换
            'map', //Baidu地图
            'gmap', //Google地图
            'insertvideo', //视频
            'help', //帮助
            'justifyleft', //居左对齐
            'justifyright', //居右对齐
            'justifycenter', //居中对齐
            'justifyjustify', //两端对齐
            'forecolor', //字体颜色
            'backcolor', //背景色
            'insertorderedlist', //有序列表
            'insertunorderedlist', //无序列表
            'fullscreen', //全屏
            'directionalityltr', //从左向右输入
            'directionalityrtl', //从右向左输入
            'rowspacingtop', //段前距
            'rowspacingbottom', //段后距
            'pagebreak', //分页
            'insertframe', //插入Iframe
            'imagenone', //默认
            'imageleft', //左浮动
            'imageright', //右浮动
            'attachment', //附件
            'imagecenter', //居中
            'wordimage', //图片转存
            'lineheight', //行间距
            'edittip ', //编辑提示
            'customstyle', //自定义标题
            'autotypeset', //自动排版
            'webapp', //百度应用
            'touppercase', //字母大写
            'tolowercase', //字母小写
            'background', //背景
            'template', //模板
            'scrawl', //涂鸦
            'music', //音乐
            'inserttable', //插入表格
            'drafts', // 从草稿箱加载
            'charts', // 图表
          ],
        ],
      },
    }
  },
  methods: {
    getRandomStr(len) {
      len = len || 32
      var $chars =
        'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
      var maxPos = $chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    ready(editorHandler) {
      this.editorHandler
    },
    getContent() {
      return this.editorContent
    },
    setContent(content) {
      this.editorContent = content
    },
    //删除图片
    delImage(index) {
      let imageList = this.imageList
      imageList.splice(index, 1)
    },
    //图片上传成功
    afterUpload(response, file) {
      console.info(response)

      let item = response[0]
      this.getImage(item)
    },
    getImage(item) {
      getAction('/common/getImage', item).then((res) => {
        if (res.code === 1) {
          let imageList = this.imageList
          item.url = res.data
          imageList.push(item)
          this.imageList = imageList
        }
      })
    },
    insertImage() {
      let imageList = this.imageList
      let imageHtml = ''
      ;(imageList || []).map((item) => {
        imageHtml = imageHtml + '<p><img width="100px" src="' + item.url + '"/></p>'
      })
      if (imageHtml != '') {
        this.editorHandler.execCommand('inserthtml', imageHtml, true)
      }
      this.dialogVisible = false
    },
    addCustomButtom(editorId) {
      let _this = this
      window.UE.registerUI(
        'test-button',
        function (editor, uiName) {
          // 注册按钮执行时的 command 命令，使用命令默认就会带有回退操作
          editor.registerCommand(uiName, {
            execCommand: () => {
              _this.imageList = []
              _this.dialogVisible = true
              _this.editorHandler = editor
            },
          })
          // 创建一个 button
          var btn = new window.UE.ui.Button({
            // 按钮的名字
            name: uiName,
            // 提示
            title: '图片上传',
            // 需要添加的额外样式，可指定 icon 图标，图标路径参考常见问题 2
            cssRules: 'background-position: -380px 0;',
            // 点击时执行的命令
            onclick: function () {
              // 这里可以不用执行命令，做你自己的操作也可
              editor.execCommand(uiName)
            },
          })

          // 当点到编辑内容上时，按钮要做的状态反射
          editor.addListener('selectionchange', function () {
            var state = editor.queryCommandState(uiName)
            if (state === -1) {
              btn.setDisabled(true)
              btn.setChecked(false)
            } else {
              btn.setDisabled(false)
              btn.setChecked(state)
            }
          })
          // 因为你是添加 button，所以需要返回这个 button
          return btn
        },
        46 /* 指定添加到工具栏上的哪个位置，默认时追加到最后 */,
        editorId /* 指定这个 UI 是哪个编辑器实例上的，默认是页面上所有的编辑器都会添加这个按钮 */
      )
    },
  },
}
</script>

<style lang="less" scoped>
.ueditor {
  height: 100% !important;
}
.ueditor div:first-child {
  height: 100% !important;
}
/deep/ div[id^='editor_'] {
  height: 100% !important;
}
/deep/ #edui1_toolbarbox {
  // height:100% !important;
}
/deep/ #edui1 {
  height: 100% !important;
}
/deep/ #edui1_iframeholder {
  height: 90% !important;
}
</style>
